<template>
  <div class="TodoDetail" v-if="data.id">
    <div class="body">
      <div class="item">
        <div class="label">开始时间：</div>
        <div class="value">{{ formatDate(new Date(data.startTime), 'yyyy年MM月dd日 HH:mm') }}</div>
      </div>
      <div class="item">
        <div class="label">结束时间：</div>
        <div class="value">{{ formatDate(new Date(data.endTime), 'yyyy年MM月dd日 HH:mm') }}</div>
      </div>
      <div class="item">
        <div class="label">待办标题：</div>
        <div class="value">{{ data.title }}</div>
      </div>
      <div class="item">
        <div class="label">待办内容：</div>
        <div class="value">{{ data.content }}</div>
      </div>
      <div class="item">
        <div class="label">待办地址：</div>
        <div class="value">{{ data.address }}</div>
      </div>
    </div>
    <div class="footer">
      <div @click="handleFinish(data)" v-if="!data.status">
        <CommonButton class="btn">马上处理</CommonButton>
      </div>
    </div>
    <CommonConfirmModel ref="CommonConfirmModel" />
    <CommonTips ref="CommonTips" />
  </div>
</template>

<script>
import api from '@/api'
import CommonButton from '@/components/CommonButton'
import { formatDate } from '@/utils'
import CommonConfirmModel from '@/components/CommonConfirmModel'
import CommonTips from '@/components/CommonTips'

export default {
  components: {
    CommonButton,
    CommonConfirmModel,
    CommonTips,
  },
  data () {
    return {
      formatDate,
      id: null,
      data: {},
    }
  },
  onLoad (option) {
    this.id = option.id
    this.getData()
  },
  methods: {
    async getData () {
      const { result } = await api.getTodoDetail({ id: this.id })
      this.data = result
    },
    async handleFinish (item) {
      this.$refs.CommonConfirmModel.$show({
        title: !item.status ? '你确定该待办已完成吗？' : '你确定取消完成该待办吗？',
        ok: async () => {
          if (item.status) {
            await api.todoCancel({ id: item.id })
            this.$refs.CommonTips.$show({
              title: '你已取消完成一条待办!',
            })
          } else {
            await api.todoComplete({ id: item.id })
            this.$refs.CommonTips.$show({
              title: '你已完成一条待办!',
            })
          }
          this.getData()
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.TodoDetail {
	.body {
		padding: 10px  13px 23px 13px;
		font-size: $fz-s;
		color: #000;
		background: #fff;

		.item {
			display: flex;
			padding: 12px 0;
			border-bottom: 1px solid rgba(0, 0, 0, .15);

			.label {
				flex: 0 0 90px;
				white-space: nowrap;
			}

			.value {
				flex: 1;
			}
		}
	}

	.footer {
		display: flex;
		justify-content: center;
		margin-top: 30px;

		/deep/ .CommonButton {
			width: 160px;
			height: 35px;
			border-radius: 4px;
			line-height: 35px;
			font-size: $fz-s;
			color: #fff;
			background: #e51e1e;
		}
	}
}
</style>
